<template>
  <div>
    <el-dialog
      title="新增仪器"
      :visible.sync="approveVisible"
      width="100%"
      center
      :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
    >
      <div>
        <div class="install-title">仪器基础信息</div>
        <el-form
          ref="installForm"
          :model="installForm"
          :rules="rules"
          label-width="130px"
        >
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="name" label="仪器名称:">
                <el-input v-model="installForm.name" style="width: 70%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="manufacturer" label="仪器品牌:">
                <el-input
                  v-model="installForm.manufacturer"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="model" label="型号规格:">
                <el-input v-model="installForm.model" style="width: 70%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="serialNumber" label="出厂编号:">
                <el-input
                  v-model="installForm.serialNumber"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="manufactureDate" label="出厂日期:">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.manufactureDate"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="type" label="仪器类别:">
                <el-select
                  v-model="searchFormData.type"
                  style="width: 70%"
                  placeholder="请选择仪器类别"
                  @change="secondColumnChange($event)"
                  value-key="id"
                  clearable
                >
                  <el-option
                    v-for="item in typleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="classType" label="检测类别:">
                <el-select
                  v-model="searchFormData.classType"
                  style="width: 70%"
                  placeholder="请选择检测类别"
                  @change="secondColumn($event)"
                  value-key="id"
                  clearable
                >
                  <el-option
                    v-for="item in classTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <!-- <el-form-item prop="department" label="使用部门:">
                <el-input v-model="installForm.department" style="width: 70%" />
              </el-form-item> -->
              <el-form-item label="使用部门:" prop="deptId">
                <treeselect
                  style="width:70%"
                  v-model="installForm.deptId"
                  :options="deptOptionss"
                  :show-count="true"
                  placeholder="请选择使用部门"
                  @select="changeDepartment"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="purchaseCode" label="采购单号/合同号:">
                <el-input
                  v-model="installForm.purchaseCode"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="fileCode" label="档案编号:">
                <el-input v-model="installForm.fileCode" style="width: 70%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仪器权属:" prop="isOwn">
                <el-select
                  v-model="installForm.isOwn"
                  placeholder="请选择仪器权属"
                  style="width: 70%"
                  filterable
                  clearable
                  @change="changeOption"
                >
                  <el-option
                    v-for="item in isOwnOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.lable"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="remark" label="备注:">
                <el-input v-model="installForm.remark" style="width: 70%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="image1" label="仪器图片:">
                <template v-if="!isPreview">
                  <el-upload
                    class="upload-demo"
                    action=""
                    drag
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleChangeUpload"
                  >
                    <div class="upload-dragger">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">点击上传</div>
                      <div class="el-upload__tip">
                        （注：照片尺寸裁剪为800px*800px）
                      </div>
                    </div>
                  </el-upload>
                </template>
                <div class="pre-box" v-else>
                  <img :src="previewImg" alt="裁剪图片" style="width: 150px" />
                  <el-upload
                    class="upload-demo"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleChangeUpload"
                  >
                    <el-button type="primary" plain>更换图片</el-button>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <template v-if="this.isOwnchoose">
            <div class="install-title">仪器借入信息</div>
            <el-row :gutter="12">
              <el-col :span="8">
                <el-form-item prop="name" label="出借方名称:">
                  <el-input
                    v-model="installForm.deviceBorrow.name"
                    style="width: 70%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="contactUser" label="出借方联系人:">
                  <el-input
                    v-model="installForm.deviceBorrow.contactUser"
                    style="width: 70%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item prop="start,end" label="预计借用日期:">
                  <div class="block">
                    <el-date-picker
                      style="width: 70%"
                      v-model="startEnd"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="8">
                <el-form-item prop="approvalTime" label="审批时间:">
                  <el-date-picker
                    style="width: 70%"
                    value-format="yyyy-MM-dd"
                    v-model="installForm.deviceBorrow.approvalTime"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item prop="approvalDep" label="审批部门:">
                  <!-- <el-input
                    v-model="installForm.deviceBorrow.approvalDep"
                    style="width: 70%"
                  /> -->
                  <treeselect
                    style="width:70%"
                    v-model="installForm.deviceBorrow.approvalDep"
                    :options="deptOptionss"
                    :show-count="true"
                    placeholder="请选择使用部门"
                    @select="changeApprovalDep"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item prop="approvalOpinion" label="审批意见:">
                  <el-input
                    v-model="installForm.deviceBorrow.approvalOpinion"
                    style="width: 70%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="12">
              <el-col :span="8">
                <el-form-item prop="approvalUser" label="审批人:">
                  <el-input
                    v-model="installForm.deviceBorrow.approvalUser"
                    style="width: 70%"
                  />
                  <!-- <el-select
                    v-model="installForm.deviceBorrow.approvalUser"
                    style="width: 70%"
                    placeholder="请选择"
                    filterable
                    multiple
                    @change="handleCheckedApprovalUser"
                  >
                    <el-option
                      v-for="item in usernameOptions"
                      :key="item.userId"
                      :label="item.empName"
                      :value="item.userId"
                    ></el-option>
                  </el-select> -->
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <div class="install-title">仪器安装验收信息</div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="installUser" label="安装人:">
                <el-input
                  v-model="installForm.addDeviceInstallTdo.installUser"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="phone" label="安装人联系方式:">
                <el-input
                  v-model="installForm.addDeviceInstallTdo.phone"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="installTime" label="安装调试日期:">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.addDeviceInstallTdo.installTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="annex" label="仪器附件信息:">
                <el-input
                  v-model="installForm.addDeviceInstallTdo.annex"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="fileName" label="仪器技术文件名称:">
                <el-input
                  v-model="installForm.addDeviceInstallTdo.fileName"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="roomId" label="放置地点:">
                <treeselect
                  style="width: 70%"
                  v-model="installForm.roomId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="选择放置地点"
                  @select="changeId"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="acceptanceUser" label="验收人:">
                <el-input
                  v-model="installForm.addDeviceInstallTdo.acceptanceUser"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="acceptanceTime" label="验收日期:">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.addDeviceInstallTdo.acceptanceTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="conclusion" label="验收结论:">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 99 }"
                  v-model="installForm.addDeviceInstallTdo.conclusion"
                  style="width: 88%"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="拆箱及安装照片:" prop="img">
                <el-upload
                  action="/api/deviceInstall/fileUpload"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="imgSuccess"
                  :on-error="imgError"
                  :limit="3"
                  name="files"
                  accept=".jpg,.jpeg,.png"
                  :on-exceed="handleExceed"
                  :on-change="customUploadChangeImage2"
                  :before-upload="beforeUpload"
                  :before-remove="beforeRemove"
                  :file-list="fileList"
                >
                  <el-button size="small" type="picture-card"
                    >点击上传</el-button
                  >
                  <p
                    slot="tip"
                    class="el-upload__tip"
                    style="color: red;margin: -35px 0px -5px 94px;"
                  >
                    （注：您最多只能上传3张图片，支持格式为 jpg、jpeg、png）
                  </p>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="install-title">仪器设置信息</div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item prop="isMaster" label="仪器属性:">
                <template size="small">
                  <el-radio-group
                    v-model="installForm.isMaster"
                    @change="properties"
                  >
                    <el-radio-button label="1">主要仪器</el-radio-button>
                    <el-radio-button label="2">辅助仪器</el-radio-button>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="showClass">
              <el-form-item prop="deviceIds" label="关联主要仪器:">
                <div style="display:flex;">
                  <el-select
                    v-model="this.selectionData"
                    multiple
                    style="width:70%"
                  >
                    <el-option
                      v-for="item in selectionData"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <el-button
                    style="padding-right:11px"
                    slot="suffix"
                    type="text"
                    @click="Claiminbulk"
                    >&nbsp;选择仪器</el-button
                  >
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="showClas">
              <el-form-item prop="deviceIds" label="关联辅助仪器:">
                <div style="display:flex;">
                  <el-select
                    v-model="this.selectionData"
                    multiple
                    style="width:70%"
                  >
                    <el-option
                      v-for="item in selectionData"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <el-button
                    style="padding-right:11px"
                    slot="suffix"
                    type="text"
                    @click="auxiliary"
                    >&nbsp;选择仪器</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="status" label="仪器状态:">
                <el-radio-group v-model="installForm.status">
                  <el-radio label="4">合格</el-radio>
                  <el-radio label="0">报废</el-radio>
                  <el-radio label="1">降级</el-radio>
                  <el-radio label="2">停用</el-radio>
                  <el-radio label="3">准用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item label="授权使用人:" prop="userIds">
                <el-input
                  style="width: 70%"
                  v-model="userNamedata"
                  :readonly="true"
                />
                <el-button type="text" @click="selectUser"
                  >&nbsp;选择使用人</el-button
                >
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="仪器负责人:" prop="blame">
                <el-input
                  style="width: 70%"
                  v-model="userName"
                  :readonly="true"
                />
                <el-button type="text" @click="addInvolvedUserId"
                  >&nbsp;选择负责人</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>

          <div class="install-title">仪器检定/校准/期间设置</div>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form-item prop="checkType" label="是否检定/校准:">
                <template>
                  <el-radio-group
                    v-model="installForm.checkType"
                    size="small"
                    @change="whether"
                  >
                    <el-radio-button label="1">检定</el-radio-button>
                    <el-radio-button label="2">校准</el-radio-button>
                    <el-radio-button label="0">否</el-radio-button>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                prop="lastTime"
                :label="lastTime[customerDialogStatus]"
              >
                <el-date-picker
                  :disabled="not"
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.lastTime"
                  @change="getStaraTime1"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="cycle" :label="cycle[customerDialogStatus]">
                <el-select
                  :disabled="not"
                  v-model="installForm.cycle"
                  style="width: 70%"
                  clearable
                  @clear="empty"
                  @change="firstColumnChangeAction($event)"
                >
                  <el-option
                    v-for="item in acceptanceTimeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                prop="nextTime"
                :label="nextTime[customerDialogStatus]"
              >
                <el-date-picker
                  :disabled="true"
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.nextTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="lastCheck" label="上次核查日期:">
                <el-date-picker
                  :disabled="not"
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.lastCheck"
                  @change="getStaraTimeData"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="checkCycle" label="核查周期:">
                <el-select
                  :disabled="not"
                  v-model="installForm.checkCycle"
                  style="width: 70%"
                  clearable
                  @clear="empty"
                  @change="firstColumnChange($event)"
                >
                  <el-option
                    v-for="item in checkCycle"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="nextCheck" label="下次仪器核查日期:">
                <el-date-picker
                  :disabled="true"
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.nextCheck"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="startTime" label="启用日期:">
                <el-date-picker
                  :disabled="not"
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.startTime"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <div class="install-title">仪器检定/校准设置</div>
            <el-col :span="4">
              <el-form-item prop="warning" label="提前">
                <el-input v-model="installForm.warning" style="width: 50px">
                </el-input>
                <span>天预警</span>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item prop="alarm" label="提前">
                <el-input v-model="installForm.alarm" style="width: 50px">
                </el-input>
                <span>天告警</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmTransfer">确认</el-button>
      </div>
    </el-dialog>
    <!-- 选择关联主要仪器 -->
    <el-dialog
      :title="titleMap[customerDialogStatus]"
      :visible.sync="Batchpopups"
      center
      top="5vh"
      width="1400px"
    >
      <el-form :model="searchForm" ref="searchForm" label-width="110px">
        <el-row :gutter="12">
          <el-col :span="30">
            <el-form :model="searchForm" inline @submit.native.prevent>
              <div style="margin: 5px 5px 5px 800px">
                <el-form-item>
                  <el-input
                    v-model="searchForm.fuzzy"
                    style="width: 250px"
                    placeholder="仪器名称/仪器编号/仪器型号"
                    clearable
                    @keyup.enter.native="handleSearch"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    class="iconfont icon-chaxun1"
                    @click="handleSearch"
                  >
                    查询</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </el-col>

          <el-col :span="8">
            <el-tree
              :data="data1"
              :props="defaultPropsa"
              @node-click="handleNodeData"
            ></el-tree>
          </el-col>

          <el-col :span="15">
            <el-table
              :model="mainAuxiliary"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="mainAuxiliary"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="mainAuxiliary"
              @select="selectionCloumn"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                fixed="left"
                width="55"
                align="center"
              />
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="185px"
                align="center"
              />

              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="110px"
                align="center"
              />

              <el-table-column
                prop="userIds"
                label="授权使用人"
                width="117px"
                align="center"
              >
              </el-table-column>
            </el-table>

            <div class="install-title" style="margin: 15px 0 0 0">已选仪器</div>
            <el-table
              :model="searchForm"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="tableData1"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="tableData1"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="170px"
                align="center"
              />
              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="userIds"
                label="授权使用人"
                width="120px"
                align="center"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="80px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="deleteRow(scope.$index, tableData1)"
                    size="small"
                  >
                    移出</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Batchpopups = false">取消</el-button>
        <el-button type="primary" @click="associatedInstruments"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      class="crop-dialog"
      append-to-body
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            accept=".jpg,.jpeg,.png"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            @cropMoving="cropMoving"
          />
        </div>
      </div>
      <div class="action-box">
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChangeUpload"
        >
          <el-button type="primary" plain>更换图片</el-button>
        </el-upload>
        <el-button type="primary" plain @click="clearImgHandle"
          >清除图片</el-button
        >
        <el-button type="primary" plain @click="rotateLeftHandle"
          >左旋转</el-button
        >
        <el-button type="primary" plain @click="rotateRightHandle"
          >右旋转</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(1)"
          >放大</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(-1)"
          >缩小</el-button
        >
        <!-- <el-button type="primary" plain @click="downloadHandle('blob')"
          >下载</el-button
        > -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加授权使用人 -->
    <el-dialog
      title="添加"
      :visible.sync="addInvolvedUserIdVisible"
      center
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-form :inline="true">
        <el-row>
          <el-form-item>
            <div style="height: 560px;overflow: auto;overflow-x: hidden;">
              <div class="head-container">
                <el-input
                  v-model="deptsName"
                  placeholder="请输入部门名称"
                  clearable
                  size="small"
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 20px;"
                />
              </div>
              <div class="head-container">
                <el-tree
                  ref="tree"
                  :data="deptOptionsdata"
                  :props="defaultPropsDept"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNodeDept"
                  default-expand-all
                  @node-click="handleNodeClickDept"
                />
              </div>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="container2">
        <tree-transfer
          ref="treeTransfer"
          :title="titles"
          :from_data="fromData"
          :to_data="toData"
          :mode="mode"
          :pid="parentId"
          :defaultProps="{ label: 'label', children: 'children' }"
          :style="{ height: '75%' }"
          defaultTransfer
          filter
          :filter-node="filterNode"
        >
        </tree-transfer>
      </div>
      <div style="margin-top: -97px;text-align: center;">
        <el-button @click="addInvolvedUserIdVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveInvolvedUserId"
          :disabled="toData.length === 0"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 现场照片预览 -->
    <el-dialog :visible.sync="dialogImageArrUrl" center top="5vh" width="50%">
      <el-form :rules="rules"  label-width="150px">
        <img :src="this.dialogImageUrl" alt="" style="width: 100%;" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImageArrUrl = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import * as ambientServer from "@/api/ambient";
import { listUser } from "@/api/system/user";
import * as List from "@/api/List";
import * as deptServer from "@/api/dept";
import { VueCropper } from "vue-cropper";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import treeTransfer from "el-tree-transfer";
import lmageCropping from "../component/ImageCropping/index.vue";

export default {
  components: {
    Pagination,
    VueCropper,
    Treeselect,
    lmageCropping,
    treeTransfer
  },
  data() {
    return {
      isPreview: false,
      dialogVisible: false,
      dialogImageUrl: "",
      dialogImageArrUrl: false,
      previewImg: "", // 预览图片地址
      // 裁剪组件的基础配置option
      option: {
        img: "", // 裁剪图片的地址
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMoveBox: false, // 截图框能否拖动
        autoCropWidth: 800, // 默认生成截图框宽度
        autoCropHeight: 800, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        enlarge: 2, // 图片根据截图框输出比例倍数
        full: false, // 是否输出原图比例的截图
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 1000 //限制图片最大宽度和高度
      },
      // 防止重复提交
      loading: false,
      file: "",
      dataurl: "",
      formInline: {
        region: ""
      },
      isOwnchoose: true,
      radio: "", //仪器状态
      usernameOptions: [],
      choosePerson: false,
      Batchpopups: false,
      open: false,
      // 是否显示cropper
      visible: false,
      // 弹出层标题
      previews: {},
      fileList: [],
      logoFileList: [],
      name: [],
      waterFileList: [],
      hideUploadEdit: false,
      hideLogoUploadEdit: false,
      //使用部门树选项
      deptOptionss: [],
      deptOptions: [],
      startEnd: [],
      computeDate: "",
      checkedBlame: "",
      blame: "",
      installForm: {
        image1: "",
        type: "",
        classType: "",
        name: "",
        manufacturer: "",
        isOwn: "",
        position: "",
        model: "",
        startTime: "",
        serialNumber: "",
        department: "",
        userIds: [],
        blame: "",
        deptId: undefined,
        fileCode: "",
        checkType: "1",
        purchaseCode: "",
        status: "4",
        isMaster: "1",
        // deviceIds: [],
        userIds: "",
        roomId: null,
        cycle: "",
        checkCycle: "",
        warning: "",
        alarm: "",
        nextTime: "",
        nextCheck: "",
        lastCheck: "",
        lastTime: "",
        manufactureDate: "",
        deviceBorrow: {
          start: "",
          approvalOpinion: "",
          approvalUser: "",
          end: "",
          name: "",
          approvalDep: null,
          approvalTime: "",
          contactUser: ""
        },
        addDeviceInstallTdo: {
          image1: "",
          image2: "",
          image3: "",
          image4: "",
          image5: "",
          acceptanceUser: "",
          installTime: "",
          acceptanceTime: "",
          fileName: "",
          conclusion: "",
          phone: "",
          annex: "",
          installUser: ""
        }
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        manufacturer: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        model: [{ required: true, message: "型号不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "检测类别不能为空", trigger: "blur" }
        ],
        classType: [
          { required: true, message: "仪器类别不能为空", trigger: "blur" }
        ],
        isOwn: [
          { required: true, message: "仪器权属不能为空", trigger: "blur" }
        ],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        start: [
          { required: true, message: "预计借用日期不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "仪器状态不能为空", trigger: "blur" }
        ],
        userIds: [
          { required: true, message: "授权使用人不能为空", trigger: "blur" }
        ],
        blame: [
          { required: true, message: "仪器负责人不能为空", trigger: "blur" }
        ],
        lastTime: [
          { required: true, message: "上次检定日期不能为空", trigger: "blur" }
        ],
        cycle: [
          { required: true, message: "检定周期不能为空", trigger: "blur" }
        ],
        warning: [{ required: true, message: "预警不能为空", trigger: "blur" }],
        alarm: [{ required: true, message: "告警不能为空", trigger: "blur" }]
      },
      searchFormData: {
        type: "",
        classType: ""
      },
      classTypeList: [],
      typleList: [
        {
          name: "现场采样仪器",
          id: 1,
          children: [
            {
              name: "水",
              id: 1
            },
            {
              name: "气",
              id: 2
            },
            {
              name: "噪声",
              id: 3
            },
            {
              name: "土壤、底泥、固废、污泥和生活垃圾",
              id: 4
            }
          ]
        },
        {
          name: "现场检测仪器",
          id: 2,
          children: [
            {
              name: "水",
              id: 1
            },
            {
              name: "气",
              id: 2
            },
            {
              name: "噪声",
              id: 3
            },
            {
              name: "土壤、底泥、固废、污泥和生活垃圾",
              id: 4
            }
          ]
        },
        {
          name: "实验室仪器",
          id: 3,
          children: [
            {
              name: "样品制备",
              id: 5
            },
            {
              name: "小型分析仪器",
              id: 6
            },
            {
              name: "色谱仪",
              id: 7
            },
            {
              name: "光谱仪",
              id: 8
            },
            {
              name: "质谱仪",
              id: 9
            }
          ]
        },
        {
          name: "校准仪器",
          id: 4,
          children: [
            {
              name: "无",
              id: 1
            }
          ]
        }
      ],
      acceptanceTimeList: [
        {
          name: "1月",
          id: 1
        },
        {
          name: "1季度",
          id: 2
        },
        {
          name: "半年",
          id: 3
        },
        {
          name: "1年",
          id: 4
        },
        {
          name: "2年",
          id: 5
        },
        {
          name: "3年",
          id: 6
        }
      ],
      checkCycle: [
        {
          name: "1月",
          id: 1
        },
        {
          name: "1季度",
          id: 2
        },
        {
          name: "半年",
          id: 3
        },
        {
          name: "1年",
          id: 4
        },
        {
          name: "2年",
          id: 5
        },
        {
          name: "3年",
          id: 6
        }
      ],
      isOwnOptions: [
        {
          lable: "自有",
          value: 1
        },
        {
          lable: "外借",
          value: 2
        }
      ],
      data1: [
        {
          label: "现场采样仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "现场检测仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "实验室仪器",
          children: [
            {
              label: "样品制备 "
            },
            {
              label: "小型分析仪器"
            },
            {
              label: "色谱仪"
            },
            {
              label: "光谱仪"
            },
            {
              label: "质谱仪"
            }
          ]
        },
        {
          label: "校准仪器",
          children: []
        }
      ],
      approveVisible: false,
      isLook: false,
      isLook1: false,
      isLook3: true,
      not: false,
      deptNameData: [],
      defaultPropsl: {
        children: "children",
        label: "deptName"
      },
      defaultPropsa: {
        children: "children",
        label: "label"
      },

      titleMap: {
        edit: "关联主要仪器",
        create: "关联辅助仪器"
      },
      lastTime: {
        edit: "上次校准日期:",
        create: "上次检定日期:"
      },
      cycle: {
        edit: "校准周期:",
        create: "检定周期:"
      },
      nextTime: {
        edit: "下次仪器校准日期:",
        create: "下次仪器检定日期:"
      },
      customerDialogStatus: "create",
      queryParams: {
        pageNumber: 1,
        pageSize: 10,
        empName: "",
        phonenumber: "",
        deptId: undefined
      },
      deptName: undefined,
      selectionData: [],
      showClass: false,
      showClas: true,
      checkAll: false,
      checkedCities: [],
      checked: [],
      editArr: [],
      cities: [],
      isIndeterminate: true,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        type: "",
        classType: ""
      },
      tableData: [],
      tableData1: [],
      mainAuxiliary: [], //选择关联仪器数据
      Selection: [],
      fileResultImage: [],
      img1: [],
      addDay: null,
      nextData: null,

      parentId: "parentId",
      mode: "transfer",
      titles: ["待选人员", "已选人员"],
      toData: [], //选中的数据
      fromData: [], //根据部门ids查询出的数据结构
      deptPulldownArray: [],
      nodeLableArray: [],
      addInvolvedUserIdVisible: false,
      userName: "",
      userNamedata: "",
      deptsName: null, // 部门名称
      deptOptionsdata: null, // 部门树选项
      defaultPropsDept: { children: "children", label: "label", id: "id" },
      deptId: null,
      updateInvolvedUserIdVisible: false,
      updateUserName: "",
      determine: ""
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getTreeselect();
    // this.findDeptPulldown()
    this.getTreeselectDept();
  },
  methods: {
    beforeUpload(e) {
      // console.log(e);
      this.files = e;
    },
    uploadFiles(e) {
      // console.log(e.target.files);
    },
    handleRemove(files, fileList) {
      // console.log(files, fileList);
    },
    handlePreview(files) {
      // console.log(files);
    },
    // handleExceedImage1(files, fileList) {
    //   // console.log(files);
    //   this.$message.warning(
    //     `当前限制选择 1 张图片，以选 ${files.length} 张照片`
    //   );
    // },
    imgSuccess(res, file, fileList) {
      console.log(file);
      // this.fileList = fileList;
      let urlImg = file.response.result[0];
      console.log(urlImg);
      this.img1.push(urlImg);
      console.log(this.img1);
      this.installForm.addDeviceInstallTdo.image1 = this.img1[0];
      this.installForm.addDeviceInstallTdo.image2 = this.img1[1];
      this.installForm.addDeviceInstallTdo.image3 = this.img1[2];
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
      this.$message({
        type: "success",
        message: "上传成功!"
      });
    },
    // 上传失败
    imgError(res) {
      this.$message({
        type: "error",
        message: "上传失败"
      });
    },
    handleExceed(files, fileList) {
      // console.log(files);
      this.$message.warning(
        `当前限制选择 3 张图片，以选 ${
          files.length
        } 张图片，共选择了 ${files.length + fileList.length} 张图片`
      );
    },
    beforeRemove(files, fileList) {
      return this.$confirm(`确定移除 ${files.name}？`);
    },

    //上传文件2
    customUploadChangeImage2(files) {
      // console.log(files);
      if (files.status === "ready") return;
      if (files.status === "success") {
        const res = files.response || {};
        if (res && res.code === 200) {
          this.fileResultImage.push(files.response.result[0]);
          console.log(this.fileResultImage);
          this.installForm.addDeviceInstallTdo.image1 = this.fileResultImage[0];
          this.installForm.addDeviceInstallTdo.image2 = this.fileResultImage[1];
          this.installForm.addDeviceInstallTdo.image3 = this.fileResultImage[2];
          // this.installForm.addDeviceInstallTdo.image1 = this.fileResult;

          this.$message({
            type: "success",
            message: "上传成功!"
          });
          this.uploadVisible = false;
        } else {
          this.$message.error("上传失败!");
          this.fileList = [];
        }
      } else {
        this.$message.error("上传失败!");
        this.fileList = [];
      }
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogImageArrUrl = true;
    },
    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      this.file = file.raw.name;
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(async () => {
        // base64方式
        // this.option.img = await fileByBase64(file.raw)
        this.option.img = URL.createObjectURL(file.raw);
        this.loading = false;
        this.dialogVisible = true;
      });
    },
    // 放大/缩小
    changeScaleHandle(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
      this.$refs.cropper.rotateRight();
    },
    // 下载
    // downloadHandle(type) {
    //   let aLink = document.createElement("a");
    //   aLink.download = "author-img";
    //   if (type === "blob") {
    //     this.$refs.cropper.getCropBlob(data => {
    //       aLink.href = URL.createObjectURL(data);
    //       aLink.click();
    //     });
    //   } else {
    //     this.$refs.cropper.getCropData(data => {
    //       aLink.href = data;
    //       aLink.click();
    //     });
    //   }
    // },
    // 清理图片
    clearImgHandle() {
      this.option.img = "";
    },
    // 截图框移动回调函数
    cropMoving(data) {
      // 截图框的左上角 x，y和右下角坐标x，y
      // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
      // console.log(cropAxis)
    },
    finish() {
      // 获取截图的 blob 数据
      this.$refs.cropper.getCropBlob(blob => {
        this.loading = true;
        this.dialogVisible = false;
        this.previewImg = URL.createObjectURL(blob);
        this.isPreview = true;
      });

      // 获取截图的 base64 数据
      this.$refs.cropper.getCropData(data => {
        console.log(data);
        //调用
        var file = this.dataURLtoFile(data, this.file);
        console.log(file);
        const formData = new FormData();
        formData.append("files", file);
        console.log(formData);
        List.fileUpload(formData).then(response => {
          if (response.code === 200) {
            this.msgSuccess("上传成功");
            console.log(response.result);
            // let url = response.result;
            // let urlStr = url.lastIndexOf("/");
            // let fileName = url.substr(urlStr + 1);
            // console.log(fileName);
            // this.$emit("listenToChildEvent",1113)
            this.installForm.image1 = response.result[0];
          }
        });
      });
    },
    //将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },

    // 仪器类别一级改动
    secondColumnChange(e) {
      this.searchFormData.classType = {};
      this.classTypeList = e.children;
      this.installForm.type = e.id;
    },
    // 检测类别二级改动
    secondColumn(e) {
      this.installForm.classType = e.id;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      console.log(45786);
      this.deptOptionss = [];
      deptServer.treeselect().then(res => {
        this.deptOptionss = this.doProcessDept(res.result) || [];
      });
    },
    doProcessDept(depts) {
      const res = [];
      depts.forEach(e => {
        const tmp = { ...e };
        if (tmp.children && tmp.children.length > 0) {
          tmp.children = this.doProcessDept(tmp.children);
        } else {
          tmp.children = undefined;
        }
        res.push(tmp);
      });
      return res;
    },
    // 新增确认
    confirmTransfer() {
      // this.listenToChildEvent()
      this.installForm.deviceBorrow.start = this.startEnd[0];
      this.installForm.deviceBorrow.end = this.startEnd[1];
      console.log(this.Selection.length);
      console.log(this.installForm);
      if (this.Selection.length != 0) {
        this.installForm.deviceIds = this.Selection;
      }
      List.Addnewdevices(this.installForm).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success"
          });
          this.approveVisible = false;
          this.userName = "";
          this.userNamedata = "";
          this.fileList = []
          this.handleSearch();
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error"
          });
          this.approveVisible = false;
        }
      });
    },

    selectionCloumn(e) {
      this.tableData1 = e;
    },
    changeOption(value) {
      if (value == 1) {
        this.isOwnchoose = false;
      }
      if (value == 2) {
        this.isOwnchoose = true;
      }
    },
    addN() {
      this.$refs.addrelevancy.approverelevancy = true;
    },
    // 关闭窗口
    closeDialog() {
      this.visible = false;
    },
    properties(e) {
      console.log(e);
      if (e == 1) {
        this.showClass = false;
        this.showClas = true;
      }
      if (e == 2) {
        this.showClass = true;
        this.showClas = false;
      }
    },
    whether(e) {
      console.log(e);
      if (e == 0) {
        this.not = true;
      }
      if (e == 1) {
        this.not = false;
        this.customerDialogStatus = "create";
      }
      if (e == 2) {
        this.not = false;
        this.customerDialogStatus = "edit";
        this.acceptanceTimeList;
      }
    },
    // 重置
    handleCreate() {
      this.clearForm();
      this.approveVisible = true;
      this.customerDialogStatus = "create";
      this.Batchpopups = true;
    },
    // 穿梭框模糊查询
    filterNode(value, data) {
      if (!value) return true;
      return data["label"] ? data["label"].indexOf(value) !== -1 : false;
    },

    // // 部门下拉数据
    // findDeptPulldown() {
    //   ambientServer.findDeptPulldownData().then(res => {
    //     this.deptPulldownArray = res.result;
    //   });
    // },
    // 查询部门下拉树结构
    getTreeselectDept() {
      this.deptOptionsdata = [];
      deptServer.treeselect().then(res => {
        this.deptOptionsdata = this.doProceDept(res.result) || [];
      });
    },
    // 部门模糊查询
    filterNodeDept(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    selectUser() {
      this.fromData = [];
      this.determine = 1;
      this.addInvolvedUserIdVisible = true;
    },
    // 添加授权使用人
    addInvolvedUserId() {
      this.fromData = [];
      this.determine = 2;
      this.addInvolvedUserIdVisible = true;
    },
    // 节点单击事件
    handleNodeClickDept(data) {
      if (data.parentId !== "0") {
        this.deptId = data.id;
      } else {
        this.deptId = "";
      }
      console.log(this.deptId);
      this.deptSearch();
    },
    // 根据选中的部门ids查询下面所有的员工信息
    deptSearch() {
      ambientServer.findUserByDeptId(this.deptId).then(res => {
        this.fromData = [];
        if (res.code === 200 && res.result) {
          this.fromData = res.result || [];

          if (this.toData.length > 0) {
            // 已选数据
            var arr2 = [];
            this.toData.forEach(item => {
              arr2.push(item.id);
            });
            // 待选数据
            var arr3 = [];
            this.fromData.forEach(item => {
              arr3.push(item.id);
            });
            // 已、待选数据交集
            var arr4 = [];
            arr3.forEach(val => {
              if (arr2.indexOf(val) < 0) {
                arr4.push(val);
              } else {
                arr2.splice(arr2.indexOf(val), 1);
              }
            });
            // 筛选后待选数据
            var arr5 = [];
            var sedata = arr4.concat(arr2);
            this.fromData.forEach(item => {
              if (sedata.includes(item.id)) {
                arr5.push({ id: item.id, label: item.label });
              }
            });
            this.fromData = arr5;
          }
        }
      });
    },

    // 装配数据结构
    doProceDept(depts) {
      const res = [];
      depts.forEach(e => {
        const tmp = { ...e };
        if (tmp.children && tmp.children.length > 0) {
          tmp.children = this.doProceDept(tmp.children);
        } else {
          tmp.children = undefined;
        }
        res.push(tmp);
      });
      return res;
    },
    // 保存授权使用人
    saveInvolvedUserId() {
      var userNames = [];
      this.toData.forEach(item => {
        userNames.push(item.label);
      });
      console.log(userNames);
      if (this.determine == 1) {
        this.userNamedata = userNames.join("，");
      }
      if (this.determine == 2) {
        this.userName = userNames.join("，");
      }
      this.handlerInvolvedUserId();
      this.addInvolvedUserIdVisible = false;
    },
    // el-input的change事件移除焦点触发,此处用于给授权使用人赋值
    handlerInvolvedUserId() {
      var userIds = [];
      this.toData.forEach(item => {
        userIds.push(item.id);
      });
      console.log(userIds);
      if (this.determine == 1) {
        this.installForm.userIds = userIds;
        this.toData = [];
      }
      if (this.determine == 2) {
        this.installForm.blame = userIds.join(",");
        this.toData = [];
      }
    },

    handleNodeClick(data) {
      console.log(data);
      this.queryParams.deptId = data.id;
      this.getList();
    },
    getList() {
      this.loading = true;
      listUser(this.queryParams)
        .then(response => {
          var userList = "";
          var arr = [],
            arr1 = [],
            arr2 = [];
          userList = response.result.records;
          // console.log(userList);
          for (let item of userList) {
            arr.push(item.userId + "-" + item.empName);
            arr1.push(item.userId);
            arr2.push(item);
            console.log(arr2);
            this.cities = arr2;
            this.editArr = arr1;
            console.log(this.editArr);
            console.log(this.cities);
            // this.mainAuxiliary = arr2
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    handleCheckedBlame(e) {
      console.log(e);
    },
    handleCheckAllChange(val) {
      console.log(val);
      this.checkedCities = val ? cityOptions : [];
      console.log(this.checkedCities);
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.checked = value;
      console.log(this.checked);
      var arr = [],
        arr1 = [];
      for (let item of value) {
        arr.push(item.userId);
        arr1.push(item.empName);
        console.log(arr);
        this.checkedBlame = arr;
        this.blame = arr1;
      }
    },
    head() {
      this.installForm.blame = this.checkedBlame.toString();
      this.choosePerson = false;
    },
    //选择关联主要仪器
    Claiminbulk() {
      this.Batchpopups = true;
      this.customerDialogStatus = "edit";
      this.searchForm.isMaster = 1;
      console.log(this.searchForm.isMaster);
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
          this.total = res.result.total;
          console.log(this.mainAuxiliary);
        }
      });
    },
    //选择关联辅助仪器
    auxiliary() {
      this.Batchpopups = true;
      this.customerDialogStatus = "create";
      this.searchForm.isMaster = 2;
      console.log(this.searchForm.isMaster);
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
          this.total = res.result.total;
          console.log(this.mainAuxiliary);
        }
      });
    },
    handleNodeData(data) {
      console.log(data);
      this.searchForm.classType = 1;
      console.log(this.searchForm);
      if (data.label == "现场采样仪器") {
        this.searchForm.type = 1;
      }
      if (data.label == "现场检测仪器") {
        this.searchForm.type = 2;
      }
      if (data.label == "实验室仪器") {
        this.searchForm.type = 3;
      }
      if (data.label == "校准仪器") {
        this.searchForm.type = 4;
      }
      if (data.label == "水") {
        this.searchForm.classType = 1;
      }
      if (data.label == "气") {
        this.searchForm.classType = 2;
      }
      if (data.label == "噪声") {
        this.searchForm.classType = 3;
      }
      if (data.label == "土壤、底泥、固废、污泥和生活垃圾") {
        this.searchForm.classType = 4;
      }
      if (data.label == "样品制备") {
        this.searchForm.classType = 5;
      }
      if (data.label == "小型分析仪器") {
        this.searchForm.classType = 6;
      }
      if (data.label == "色谱仪") {
        this.searchForm.classType = 7;
      }
      if (data.label == "光谱仪") {
        this.searchForm.classType = 8;
      }
      if (data.label == "质谱仪") {
        this.searchForm.classType = 9;
      }
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
        }
      });
    },
    associatedInstruments() {
      // console.log(222);
      this.installForm.deviceIds = this.Selection;
      // console.log(this.installForm.deviceIds);
      this.Batchpopups = false;
    },
    handleSearch() {
      // console.log(123);
      api.updateById(this.searchForm).then(res => {
        if (res.code === 200) {
          console.log(111, res);
          this.tableData = res.result.records;
          console.log(this.tableData);
          this.total = res.result.total;
        }
      });
    },

    // 移出
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    getStaraTime1(e) {
      // console.log(e);
      this.installForm.lastCheck = e;
      console.log(this.installForm.lastCheck);
      this.installForm.cycle = null;
    },
    getStaraTimeData(e) {
      // console.log(e);
      this.installForm.lastCheck = e;
      console.log(this.installForm.lastCheck);
      this.firstColumn();
    },
    firstColumn() {
      console.log(this.computeDate);

      if (this.computeDate === 1) {
        this.addDay = 30;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
      if (this.computeDate === 2) {
        this.addDay = 90;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
      if (this.computeDate === 3) {
        this.addDay = 180;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
      if (this.computeDate === 4) {
        this.addDay = 365;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
      if (this.computeDate === 5) {
        this.addDay = 730;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
      if (this.computeDate === 6) {
        this.addDay = 1095;
        console.log(this.installForm.lastCheck);
        this.getStaraTime(this.installForm.lastCheck, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextCheck);
      }
    },
    getStaraTime(date, days) {
      if (days == undefined || days == "") {
        days = null;
      }
      var date = new Date(date);
      date.setDate(date.getDate() + this.addDay);
      var month = date.getMonth() + 1;
      console.log(month);
      var day = date.getDate();
      console.log(this.addDay);
      this.nextData =
        date.getFullYear() +
        "-" +
        this.getFormatDate(month) +
        "-" +
        this.getFormatDate(day);
      console.log(
        date.getFullYear() +
          "-" +
          this.getFormatDate(month) +
          "-" +
          this.getFormatDate(day)
      );
    },
    getFormatDate(arg) {
      if (arg == undefined || arg == "") {
        return "";
      }

      var re = arg + "";
      if (re.length < 2) {
        re = "0" + re;
      }

      return re;
    },

    // 下次检定校准日期
    firstColumnChangeAction(e) {
      console.log(e);
      this.computeDate = e;
      this.installForm.checkCycle = e;
      console.log(this.computeDate);

      if (e === 1) {
        (this.installForm.warning = "15"), (this.installForm.alarm = "7");
        this.addDay = 30;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextTime);
      }
      if (e === 2) {
        (this.installForm.warning = "30"), (this.installForm.alarm = "7");
        this.addDay = 90;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 3) {
        (this.installForm.warning = "60"), (this.installForm.alarm = "10");
        this.addDay = 180;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 4) {
        (this.installForm.warning = "90"), (this.installForm.alarm = "15");
        this.addDay = 365;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 5) {
        (this.installForm.warning = "90"), (this.installForm.alarm = "15");
        this.addDay = 730;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 6) {
        (this.installForm.warning = "90"), (this.installForm.alarm = "15");
        this.addDay = 1095;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextTime = this.nextData;
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 7) {
        (this.installForm.warning = "无"), (this.installForm.alarm = "无");
        this.addDay = null;
        this.installForm.nextTime = null;
        this.installForm.nextCheck = null;
      }
    },
    firstColumnChange(e) {
      console.log(e);
      this.computeDate = e;
      this.installForm.checkCycle = e;
      console.log(this.computeDate);

      if (e === 1) {
        this.addDay = 30;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
        console.log(this.installForm.nextTime);
      }
      if (e === 2) {
        this.addDay = 90;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 3) {
        this.addDay = 180;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 4) {
        this.addDay = 365;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 5) {
        this.addDay = 730;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 6) {
        this.addDay = 1095;
        console.log(this.installForm.lastTime);
        this.getStaraTime(this.installForm.lastTime, this.addDay);
        this.installForm.nextCheck = this.nextData;
      }
      if (e === 7) {
        this.addDay = null;
        this.installForm.nextCheck = null;
      }
    },
    // 清空
    empty(e) {
      (this.installForm.warning = ""), (this.installForm.alarm = "");
    },
    handleSelectionChange(val) {
      console.log(val);
      var arr = [];
      var arrData = [];
      var selectAll = [];
      for (var item of val) {
        selectAll.push(item);
        this.tableData1 = selectAll;
        arr.push(item.id);
        // console.log(item.id);
        arrData.push(item.name);
        // console.log(arr + []);
        this.Selection = arr;
        console.log(this.Selection);
        this.selectionData = arrData;
        console.log(this.selectionData);
      }
    },
    changeId(e) {
      console.log(e);
      this.installForm.roomId = e.id;
      this.installForm.position = e.name;
    },
    changeDepartment(e) {
      console.log(e);
      this.installForm.department = e.label;
      this.installForm.deptId = e.id;
    },
    changeApprovalDep(e) {
      console.log(e.label);
      // this.installForm.deviceBorrow.approvalDep = e.label;
      this.installForm.deviceBorrow.approvalDep = e.id;
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.childList && !node.childList.length) {
        delete node.childList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      };
    },
    handleCheckedCitiesUser(e) {
      // console.log(e);
      this.installForm.userIds = e;
      console.log(this.installForm.userIds);
    },
    handleCheckedApprovalUser(e) {
      // console.log(e);
      this.installForm.deviceBorrow.approvalUser = e;
      console.log(this.installForm.deviceBorrow.approvalUser);
    }
  }
};
</script>
<style lang="scss" scoped>
.clearfix {
  line-height: 40px;
  display: flex;
}
.install-title {
  display: flex;
  align-items: center;
  line-height: 30px;
  padding-left: 20px;
  color: rgb(15, 14, 14);
  background-color: #f3f2f2;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.delete {
  width: 10px;
  height: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
::v-deep .el-upload-list {
  display: flex;
  margin: 0px;
  width: 100%;
  li {
    width: 120px;
    height: 80px;
    margin: 0;
  }
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

::v-deep.avatar-upload-preview {
  width: 400px;
  border-radius: 0%;
  height: 400px;
  > img {
    transform: translateX(0);
  }
}
.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}

/deep/.upload-dragger {
  background-color: #ffff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 80%;
}

.cropper-wrapper {
  //height: calc(100vh - 50px);
  .pre-box {
    button {
      width: 100px;
      margin-top: 15px;
    }
  }
}

.crop-dialog {
  .cropper-content {
    padding: 0 40px;

    .cropper {
      width: 900px;
      height: 900px;
    }
  }

  .action-box {
    padding: 25px 40px 0 40px;
    display: flex;
    justify-content: center;

    button {
      width: 80px;
      margin-right: 15px;
    }
  }

  .dialog-footer {
    button {
      width: 100px;
    }
  }
}
.el-divider--vertical {
  display: inline-block;
  width: 2px;
  height: 30em;
  margin: 0px 5px;
  vertical-align: middle;
  position: relative;
}

.container2 {
  width: 680px;
  height: 620px;
  overflow: auto;
  overflow-x: hidden;
  margin-left: 250px;
  margin-top: -525px;
}
/deep/ .wl-transfer .transfer-main {
  padding: 10px;
  height: calc(100% - 80px);
  box-sizing: border-box;
  overflow: auto;
}
</style>
